<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
    <div id="displayItems">
        <table border="1">
            <tr>
                <th>ID</th>
                <th>接口名</th>
                <th>测试人员</th>
                <th>项目名</th>
                <th>项目ID</th>
                <th>描述信息</th>
                <th>创建时间</th>
                <th>项目数</th>
            </tr>
            <tr v-for="item in cases">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.tester }}</td>
                <td>{{ item.project }}</td>
                <td>{{ item.project_id }}</td>
                <td>{{ item.desc }}</td>
                <td>{{ item.create_time }}</td>
                <td>{{ item.testcases }}</td>
                <td>
                    <button type="button" @click="deleteItem(item.id)">删除</button>
                </td>
            </tr>

        </table>
    </div>
    <div id="addItems">
        <div>ID: <input type="text" v-model="newItemData.id"></div>
        <div>接口名: <input type="text" v-model="newItemData.name"></div>
        <div>测试人员: <input type="text" v-model="newItemData.tester"></div>
        <div>项目名: <input type="text" v-model="newItemData.project"></div>
        <div>项目ID： <input type="text" v-model="newItemData.project_id"></div>
        <div>描述信息: <input type="text" v-model="newItemData.desc"></div>
        <div>创建时间: <input type="text" v-model="newItemData.create_time"></div>
        <div>项目数: <input type="text" v-model="newItemData.testcases"></div>
        <button type="button" @click="addItem(newItemData)">增加</button>
    </div>
</div>

</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                newItemData: {
                    "id": '',
                    "name": "",
                    "tester": "",
                    "project": "",
                    "project_id": '',
                    "desc": "",
                    "create_time": "",
                    "testcases": '',
                },
                cases: [
                    {
                        "id": 1,
                        "name": "登录接口_自动化测试平台项目",
                        "tester": "可优",
                        "project": "自动化测试平台项目",
                        "project_id": 1,
                        "desc": "登录接口",
                        "create_time": "2019-11-06 14:50:30",
                        "testcases": 9,
                    },
                    {
                        "id": 2,
                        "name": "注册接口_自动化测试平台项目",
                        "tester": "可可",
                        "project": "自动化测试平台项目",
                        "project_id": 1,
                        "desc": "自动化测试平台项目, 注册接口",
                        "create_time": "2019-11-06 14:51:00",
                        "testcases": 0,
                    },
                    {
                        "id": 3,
                        "name": "创建项目接口_自动化测试平台项目",
                        "tester": "可优",
                        "project": "自动化测试平台项目",
                        "project_id": 1,
                        "desc": "这是自动化测试平台创建项目接口",
                        "create_time": "2019-11-06 14:51:45",
                        "testcases": 1,
                    },
                    {
                        "id": 4,
                        "name": "注册接口_前程贷P2P金融项目",
                        "tester": "小可可",
                        "project": "前程贷P2P金融项目",
                        "project_id": 2,
                        "desc": "",
                        "create_time": "2019-11-06 14:52:22",
                        "testcases": 0,
                    },
                    {
                        "id": 5,
                        "name": "登录接口_前程贷P2P金融项目",
                        "tester": "柠檬小姐姐",
                        "project": "前程贷P2P金融项目",
                        "project_id": 2,
                        "desc": "",
                        "create_time": "2019-11-06 14:52:40",
                        "testcases": 0,
                    },
                    {
                        "id": 6,
                        "name": "查看项目列表接口_前程贷P2P金融项目",
                        "tester": "柠檬小姐姐",
                        "project": "前程贷P2P金融项目",
                        "project_id": 2,
                        "desc": "",
                        "create_time": "2019-11-06 17:22:50",
                        "testcases": 1,
                    }
                ]
            }
        },
        methods: {
            deleteItem(id) {
                this.cases = this.cases.filter(x => x.id !== id);
            },

            addItem(newItem) {
                this.cases.push(newItem);
            }
        }
    }).mount("#app")
</script>
</html>